<template>
    <div class="notice">
        <div class="list">
            <div class="item flex-a" v-for="item in noticeList">
                <div>
                    <img src="https://cxj.szzkba.cn/upload/i/2024/09/26/155010.png" alt="">
                </div>
                <div style="width: 100%;">
                    <div class="flex-a flex-b">
                        <div class="title">系统消息</div>
                        <div class="time">{{ item.CreatedAt }}</div>
                    </div>
                    <div class="msg">{{ item.messageText }}</div>
                </div>
            </div>
        </div>
        <div v-if="noticeList.length == 0" class="empty">
            <div><img src="https://cxj.szzkba.cn/upload/i/2024/09/26/155749.png" alt=""></div>
            <div>暂无消息</div>
            <div></div>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Left } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getNotice } from '../../../../api/index';
export default {
    components: {
        Left,
    },
    setup() {
        const data = reactive({
            noticeList: [],
            user: {}
        });

        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    data.user = res.data
                    getList()
                }
            })
        });
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const getList = () => {
            getNotice({ userId: data.user.uuid }).then(res => {
                if (res.code == 0) {
                    data.noticeList = res.data.list
                }
            })
        }
        return {
            ...toRefs(data), jumpTo, getList
        }
    }
};
</script>


<style lang="scss">
.notice {
    .list {
        padding-top: 20rpx;

        .item {
            margin-bottom: 20rpx;
            padding: 20rpx 30rpx;
            font-size: 26rpx;
            background: #fff;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #070A2D;
            }

            .time {
                color: #A1A1A1;
                font-size: 24rpx;
            }

            .msg {
                color: #696969;
                font-size: 26rpx;
                margin-top: 10rpx;
            }

            img {
                width: 108rpx;
                height: 108rpx;
                margin-right: 20rpx
            }
        }
    }

    .empty {
        text-align: center;
        height: 100vh;

        img {
            width: 456rpx;
            height: 337rpx;
            margin-top: 250rpx;
        }

        div:nth-child(2) {
            font-size: 30rpx;
            font-weight: bold;
            color: #242745;
            margin: 100rpx 0 20rpx;
        }

        div:last-child {
            color: #788290;
            font-size: 24rpx;
        }
    }
}
</style>